<template>
  <div class="home">
    <div class="home-top">
      <router-link to="login">
        <button>退出</button>
      </router-link>
      <starport port="my-id">
        <avatar />
      </starport>
    </div>
    <div class="home-content">
      <component :is="Math.random() > 0.5 ? 'a' : 'span'">123</component>

      <section class="g-img1">
        <a-row :gutter="16" class="personal-content">
          <a-col :span="12">
            <a-statistic-countdown
              title="您的生命剩余"
              :value="deadline"
              style="margin-right: 50px"
              @finish="onFinish"
            />
          </a-col>
          <a-col :span="12">
            <a-statistic-countdown
              title="The rest of your life"
              :value="deadline"
              format="HH:mm:ss:SSS"
              style="margin-right: 50px"
            />
          </a-col>
          <a-col :span="24" style="margin-top: 32px">
            <a-statistic-countdown title="还不快去学习" :value="deadline" format="D 天 H 时 m 分 s 秒" />
          </a-col>
        </a-row>
      </section>
      <section class="g-img2">
        <div class="personal-content">
          <p>{{ tuple[0] }} - {{ tuple[1] }}</p>
          <p>{{ enumValue_2 }}</p>
        </div>
      </section>
      <section class="g-img3">
        <div class="personal-content test-text">
          Lorem Ipsum，也称乱数假文或者哑元文本，
          是印刷及排版领域所常用的虚拟文字。由于曾经一台匿名的打印机刻意打乱了一盒印刷字体从而造出一本字体样品书，Lorem
          Ipsum从西元15世纪起就被作为此领域的标准文本使用。它不仅延续了五个世纪，还通过了电子排版的挑战，其雏形却依然保存至今。在1960年代，”Leatraset”公司发布了印刷着Lorem
          Ipsum段落的纸张，从而广泛普及了它的使用。最近，计算机桌面出版软件”Aldus PageMaker”也通过同样的方式使Lorem
          Ipsum落入大众的视野。
        </div>
      </section>
      <section class="g-img4">
        <div class="personal-content">
          <h3>选择你的</h3>
          <select name="" id="" v-model="cityValue">
            <option value="">--select one--</option>
            <option value="1">成都</option>
            <option value="2">南充</option>
            <option value="3">眉山</option>
            <option value="4">乐山</option>
            <option value="5">绵阳</option>
            <option value="6">德阳</option>
          </select>
        </div>
      </section>
      <section class="g-img5">
        <div class="personal-content">
          <input-dom v-model:first="inputValue1" v-model:second.capitalize="inputValue2" />
          {{ `${inputValue1} - ${inputValue2}` }}
          <hr />
          <my-button class="my-button" @click="buttonClick" />
          <hr />
          <fancy-button>
            <template v-slot="{ text, count }">
              {{ `${text} - ${count}` }}
            </template>

            <template #footer="footerProps">
              {{ footerProps }}
            </template>
          </fancy-button>
        </div>
      </section>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { ref } from 'vue'
  import avatar from '../components/avatar.vue'
  import { Starport } from 'vue-starport'
  import { colorEnum_enum } from './test-component/typescript_test'
  import { colorEnum_const } from './test-component/typescript_test'
  import InputDom from './test-component/inputDom.vue'
  import MyButton from './test-component/MyButton.vue'
  import FancyButton from './test-component/FancyButton.vue'

  const onFinish = () => {}
  const deadline = ref(Date.now() + 1000 * 60 * 60 * 24 * 2 + 1000 * 30)
  const cityValue = ref<number>()
  const inputValue1 = ref<string>('')
  const inputValue2 = ref<string>('')

  const buttonClick = () => {}

  // 元组
  const tuple = ref<[string, number]>(['', 0])
  tuple.value = ['hello', 30000]
  // 枚举
  // const enumValue = ref<typeof colorEnum_const>({
  //   color: colorEnum_const.Red
  // })

  const enumValue_2 = ref<typeof colorEnum_const>(colorEnum_const)

  // const enumValue_2 = ref<Record<string, string>>({
  //   color: colorEnum_enum.Red
  // })

  // 混合类型
  interface Counter {
    counter(start: number): string
    interval: number
    reset(): void
  }
  // function getCounter(): Counter {
  //   let counter = <Counter>function (start: number) { }
  //   counter.interval = 111
  //   counter.reset = function() { }
  //   return counter
  // }
  const getCounter: Counter = {
    counter: (start: number) => '',
    interval: 11,
    reset() {}
  }

  // 类
  // class Animal {
  //   move(distance: number) {
  //   }
  // }
  // class Dog extends Animal {
  //   bark() {
  //   }
  // }

  const Animal = function () {}
  Animal.prototype.move = function (distance: number) {}

  // const dog = new Dog()
  const animal = new Animal()
  animal.move(10)
  // Dog.bark()

  // 存取器
  let passcode = 'secret password'
  class Employee {
    private _fullName: string = ''
    get fullName(): string {
      return this._fullName
    }

    set fullName(newName: string) {
      if (passcode && passcode === 'secret password') {
        this._fullName = newName
      } else {
      }
    }
  }
  let employee = new Employee()
  passcode = '123'
  employee.fullName = 'Bob'

  // 泛型
  function echo<T>(arg: T): T {
    return arg
  }
  // let output = echo<string>('echo1')
  let output = echo('echo2')

  // 泛型约束
  interface Lengthwise {
    length: number
  }
  function loggingIdentity<T extends Lengthwise>(arg: T): T {
    return arg
  }
  let echo1 = loggingIdentity('10')

  // 在泛型约束中使用类型参数
  function getProperty<T, K extends keyof T>(obj: T, key: K) {
    return obj[key]
  }
  let x = { a: '1', b: '2', c: '3' }
  let value = getProperty(x, 'a')
  // let value = getProperty(x, 'm')
</script>

<style lang="less" scoped>
  .standar_img {
    background-repeat: no-repeat;
    background-position: center;
    background-size: auto;
    background-attachment: fixed;
    height: 120vh;
    position: relative;
  }

  .home {
    padding: 0 10px;
    height: 100vh;

    .home-top {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      // position: fixed;
      z-index: 1;
      overflow: hidden;
      width: 100%;
      background: #fff;

      div[port] {
        width: 80px;
        height: 80px;
        border-radius: 50%;
        margin: 4px 8px 10px;
        transition: all 2s;

        :deep(img) {
          width: 80px;
          height: 80px;
          border-radius: 50%;
        }
      }

      button {
        width: 80px;
        height: 40px;
        border: none;
        border-radius: 4px;

        &:hover {
          background: #44a08d;
        }

        a {
          text-decoration: none;
          color: #b29f94;
          font-size: 16px;
        }
      }
    }

    .home-content {
      margin: 0 auto;
      max-width: 1175px;

      .g-img1 {
        background: url('@/assets/image/img1.jpg');
        .standar_img();
      }

      .g-img2 {
        background: url('@/assets/image/img2.jpg');
        .standar_img();
      }

      .g-img3 {
        background: url('@/assets/image/img3.jpg');
        .standar_img();
      }

      .g-img4 {
        background: url('@/assets/image/img4.jpg');
        .standar_img();
      }

      .g-img5 {
        background: url('@/assets/image/img5.jpg');
        .standar_img();
      }
    }
  }
</style>
